<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
	
	<!-- jQuery  -->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui  -->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all" />
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<style type="text/css">
			body{background-color: #f4f4f4 !important;}
		   .header{position:fixed;top: 0;width: 100%;background: #fff;z-index: 999;}
		   .headcon{width: 1200px;margin: auto; display: flex;align-items: center;color: #1E9FFF;padding: 30px 0;}
		   .headcon .tit{font-size: 36px;font-weight: 700;}
		   .headcon .search{display: flex;align-items: center;border: 2px solid #1E9FFF;margin-left: 200px;height: 40px;border-radius: 8px;}
		   .headcon .search input{border: none;width: 500px;}
		   .headcon .searchbtn{background: #1E9FFF;width: 100px;text-align: center;height: 40px;color: #fff;line-height: 40px;font-size: 18px;cursor: pointer;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}
		   
		   .goods{background-color: #f4f4f4;padding: 30px 0;min-height: 80vh;}
		   .goodscon{width: 1200px;margin: auto;background-color: #fff;}
		   .goodscon .nodata{text-align: center;padding: 100px;font-size: 18px;color: #888;display: none;}
		   .goodscon .itemlist{display: flex;align-items: center;padding: 20px;border-radius: 10px;flex-wrap: wrap}
		   .goodscon .item{width: 210px;margin: 10px;border: 1px solid #ddd;cursor: pointer;position: relative;}
		   .goodscon .item .zticon{position: absolute;top: 0;left: 0;z-index: 99;width: 50px;height: 50px;}
		   .goodscon .item img{width:210px;height: 	210px;}
		   .goodscon .item .top{position: relative;}
		   .goodscon .item .top div{position: absolute;bottom: 0;right: 0;background: #999;color: #fff;padding: 2px 5px;font-size: 12px;}
		   .goodscon .item .con{padding: 10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;height: 15px;}
		   .goodscon .item .bom{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom div:nth-child(1){color: #ee5417;}
		   .goodscon .item .bom div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
		   .goodscon .item .bom2 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px;}
		   .goodscon .item .bom2 div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
	
	</style>
	
	<!-- 购物车悬浮框 -->
	<style>
		.footer-view{
			box-sizing: border-box;
			width: 70px;
			text-align: center;
			line-height: 70px;
			/* 关键代码 */
			height:80px;
			/* 底部固定关键代码 */
			position: fixed;
			bottom: 20px;
			right: 0;
			margin-right: 300px;
		}
		.footer{
			border: none;
			border-radius: 15px;
			background-color: #27888F;
			opacity: 0.6;
			color: white;
			cursor: pointer;
			width: 70px;
			height: 70px;
			margin: 0 auto;
			font-weight: 600;
			font-size: 20px;
			box-shadow: #D2D8E0 2px 2px 2px 2px ;
		}
		.eKnowAiBtn{
			opacity: 1;
		}
		
		.num_cart{
			position: absolute;
			margin-left: -5px;
			margin-top: -10px;
			font-size: 12px;
			color: #fff;
			background: #ff0000;
			text-align: center;
			box-shadow: 0 0 0 1px #fff;
			border-radius: 10px;
			padding: 0;
			width: 24px;
			height: 24px;
			line-height: 24px;
			display: inline-block;
		}
	</style>
	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
</head>
<body>
	<div class="header">
		 <div class="headcon">
			  <div class="tit">逸思精品</div>
			  <div class="search">
				   <i class="layui-icon layui-icon-search" style="font-size: 22px; color: #1E9FFF;margin: 0 10px;"></i>  
				   <input type="text" class="code" placeholder="搜索商品"/>
				   <div class="searchbtn" onclick="loadPage()">搜 索</div>
			  </div>
		 </div>
	</div>
	<div style="width: 100%;height:110px"></div>
	<div class="goods">
		<div class="goodscon">
			<div class="nodata">
				<img style="width: 200px;height:200px" src="/static/img/nodata.png" alt="">
				<div>暂无数据</div>
			</div>
			
			<!-- 商品列表内容 -->
			<div class="itemlist"></div>
						
			<!-- 分页插件 -->
			<div id="id_pager"></div>
		</div>
	</div>

	<div class="footer-view">
		<div class="footer" id="eKnowAi" onclick="toCart()">
			<img alt="" src="/static/img/jingpin/cart.png" width="80%">
			<span id="id_num_cart" class="layui-badge num_cart">[[${numProductOnCart}]]</span>
		</div>
	</div>

<script th:inline="javascript">
	var prefix = ctx + "hr/choiceshop";
	var gridColumns = [[${gridColumns}]]
</script>

<script type="text/javascript">
/*
* 购物车悬浮框鼠标移动效果
*/
$("#eKnowAi").mouseover(function() {
	$("#eKnowAi").addClass("eKnowAiBtn");
});
$("#eKnowAi").mouseout(function() {$("#eKnowAi").removeClass("eKnowAiBtn");});

var totalNum = null; // 总条数
var $,layer,laydate,form,table,wherestr={};
layui.use(['table','laydate','form','layer','jquery','element','laypage'], function () {
	$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;

	loadPage();
});

function loadPage() {
	// 加载第一页数据
	listData(1);
	
	// 加载分页导航
	loadLayPage();
}

function toBuy(code) {
	window.open("/web/business/tpProductCarefullyChosen/toBuy?code=" + code, "_blank");
}

/*
 * 加载数据
 */
function listData(page) {
	var code = $('.code').val();
	var data = {
		code: !code ? '' : code,
		page: page
	};
	$.ajaxSettings.async = false;
	$.get('/api/inter/tpProductCarefullyChosen/list', data, function(res){
		var rows = res.data.rows;
		var str=''
		if(rows.length > 0) {
			$('.nodata').hide()
			$('.itemlist').show()
			for(var i=0; i < rows.length; i++){
				str += `<div class="item" onclick="toBuy('${rows[i].code}')">`;
				if(rows[i].vtype == '爆品') {
					str += `<img class="zticon" src="/static/img/jingpin/vtype1.png">`;
				} else if(rows[i].vtype == '新品') {
					str += `<img class="zticon" src="/static/img/jingpin/vtype2.png">`;
				}
				str += `<div class="top">`
					+ `<img src="${rows[i].img}"></div>`
					+ `<div class="con" title="${rows[i].name}">${rows[i].name}</div>`
					+ `<div class="bom">`
					+ `<div>￥<span style="font-size: 22px;">${rows[i].purchasePrice}</span></div>`
					+ `</div>`
					+ `<div class="bom2">`
					+ `<div>库存：${rows[i].numStock}</div>`
					+ `<div>`
					+ `<div>人数：${rows[i].numBuyer}</div>`
					+ `<div>销量：${rows[i].numSale}</div>`
					+ `</div>`
					+ `</div>`
					+ `</div>`;
			}
		} else {
			$('.nodata').show()
			$('.itemlist').hide();
		}
		totalNum = res.data.totalNum;
		$('.itemlist').html(str);
	});
}

/*
 * 加载分页导航
 */
function loadLayPage() {
	
	// 分页组件
	laypage.render({
		elem: 'id_pager'
		,count: totalNum
		,theme: '#1E9FFF'
		,layout: ['prev', 'page', 'next']
		,limit: 10
		,jump: function(obj, first){
			// 首次不执行
			if(!first){
				listData(obj.curr);
			}
		}
	});
}

/*
* 弹出购物车页面
*/
function toCart() {
	layer.open({
		type: 2,
		title: "逸思精品购物车",
		area: ['80%', '80%'],
		content: '/web/business/tpProductCarefullyChosen/toCart'
	});
}
</script>
</body>
</html>